<template>
    <div class="pins">
        <div v-if="pins.length!=0">
            <ul class="pin-list">
                <li class="pin-item" v-for="(item,index) in pins" :key="index">
                    <div class="pin">
                        <div class="pin-header-row">
                            <div class="account-group">
                                <div class="user-popover">
                                    <router-link :to="{path:`/user/${$route.params.id}`}" class="popover-link">
                                        <img class="avatar" :src="iconBasicUrl+item.icon" alt="">
                                    </router-link>
                                </div>
                                <div class="pin-header-content">
                                    <div class="user-popover">
                                        <router-link class="username" :to="{path:`/user/${$route.params.id}`}">{{item.nick_name}}</router-link>
                                    </div>
                                    <div class="user-meta">
                                        <div class="position ellipsis">
                                            前端开发 @ 未知公司
                                        </div>
                                        <div class="dot">·</div>
                                        <router-link class="time" :to="{path:`/user/${$route.params.id}`}">1天前</router-link>
                                    </div>
                                </div>
                            </div>
                            <!-- <div class="begin-follow">
                                <button class="subscribe-btn follow-button">
                                    <span>关注</span>
                                </button>
                            </div> -->
                        </div>
                        <div class="pin-content-row">
                            <div class="content-box">
                                <span>{{item.info.content}}</span>
                            </div>
                        </div>
                        <div class="pin-img-row" v-if="item.info.imgs.length!==0">
                            <div class="img-wrap">
                                <div class="img-box" :class="countClass[index]">
                                    <div class="pin-img" v-for="(iItem,iIndex) in item.info.imgs" :key="iIndex">
                                        <img :src="iconBasicUrl
                                        +
                                        iItem" alt="" class="image">
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pin-action-row">
                            <div class="action-box">
                                <div class="like-action action">
                                    <div class="action-title-box">
                                        <!--<i class="like"></i>-->
                                        <span class="action-title">点赞</span>
                                    </div>
                                </div>
                                <div @click="showCommentArea(index)" class="action">
                                    <div class="action-title-box">
                                        <!--<i class="comment"></i>-->
                                        <span class="action-title">评论</span>
                                    </div>
                                </div>
                            </div>
                        </div>
                        <div class="pin-comment-row" v-if="isShowComment[index]">
                            <div class="comment-list-box">
                                <div class="comment-form" :class="oneIpArr[index][`oneip${index}`]?'focused':''">
                                    <div class="avatar-box">
                                        <img class="avatar" src="../../assets/img/user_avatar/avatar.png" alt="">
                                    </div>
                                    <!-- 最顶部的评论框 -->
                                    <div class="form-box">
                                        <input type="text" @blur="oneIpBlur(index)" @focus="oneIpFocus(index)" v-model="oneIpArr[index][`oneip${index}`]" class="oneTxt" placeholder="输入评论...">
                                        <!-- 发送评论的按钮 -->
                                        <div class="action-comment-box" v-show="oneIpBtn[index]">
                                            <div class="comment-submit">
                                                <button @click="submitOne(index)" :disabled="!oneIpArr[index][`oneip${index}`]" class="submit-btn">评论</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <div class="comment-list">
                                    <div class="comment-item" v-for="(item1,index1) in oneCommentData[index]" :key="index1">
                                        <div class="user-popover-box">
                                            <router-link :to="{path:`/user/${item1.user_id}`}" class="user-link">
                                                <img class="avatar" :src="oneIcon[index][index1]" alt="">
                                            </router-link>
                                        </div>
                                        <div class="content-box content-underline">
                                            <div class="meta-box">
                                                <div class="user-popover-box">
                                                    <router-link :to="{path:`/user/${item1.user_id}`}" class="username">
                                                        {{item1.nick_name}}  
                                                    </router-link>
                                                </div>
                                            </div>
                                            <div class="content">
                                                {{item1.comment_info}}
                                            </div>
                                            <div class="reply">
                                                <span class="time">
                                                    14天前
                                                </span>
                                                <div class="action-box">
                                                    <div class="comment-action action" @click="showTwoIp(index,index1)">
                                                        <svg data-v-17d14546="" aria-hidden="true" width="16" height="16" viewBox="0 0 20 20" class="icon comment-icon"><g data-v-17d14546="" fill="none" fill-rule="evenodd"><path data-v-17d14546="" d="M0 0h20v20H0z"></path> <path data-v-17d14546="" stroke="#8A93A0" stroke-linejoin="round" d="M10 17c-4.142 0-7.5-2.91-7.5-6.5S5.858 4 10 4c4.142 0 7.5 2.91 7.5 6.5 0 1.416-.522 2.726-1.41 3.794-.129.156.41 3.206.41 3.206l-3.265-1.134c-.998.369-2.077.634-3.235.634z"></path></g></svg>
                                                        <span class="action-title">回复</span>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 回复给一级评论的输入框 -->
                                            <div class="comment-form reply-form reply" v-show="twoIpBtn[index][index1]">
                                                <div class="form-box">
                                                    <input type="text" v-model="twoIpArr[index][`twoip${index}`]" class="oneTxt" placeholder="输入评论...">
                                                    <div class="action-comment-box">
                                                        <div class="comment-submit">
                                                            <button @click="submitTwo(index,index1)" class="submit-btn">评论</button>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                            <!-- 二级评论区域 -->
                                            <div class="sub-content-list">
                                                <div class="item" v-for="(item2,index2) in oneCommentData[index][index1].child" :key="index2">
                                                    <div class="sub-content">
                                                        <div class="sub-comment-content-row">
                                                            <div class="sub-comment-content-box">
                                                                 <div class="user-popover-box">
                                                                    <router-link :to="{path:`/user/${item2.user_id}`}" class="user-link">
                                                                        <img class="avatar" 
                                                                        :src="
                                                                            'http://api_devss.wanxikeji.cn/' +
                                                                            item2.icon
                                                                            "
                                                                         alt="">
                                                                    </router-link>
                                                                </div>       
                                                                <div class="user-content-box">
                                                                    <div class="profile">
                                                                        <div class="user-popover-box">
                                                                        <router-link :to="{path:`/user/${item2.user_id}`}" class="username">
                                                                            {{item2.nick_name}}  
                                                                        </router-link>
                                                                    </div>
                                                                    </div>
                                                                    <div class="content-box">
                                                                        <span class="content">
                                                                            {{item2.comment_info}}
                                                                        </span>
                                                                    </div>
                                                                    <div class="sub-comment-stat-box">
                                                                        <span class="time">14天前</span>
                                                                        <div class="sub-comment-action-box">
                                                                            <div class="comment-action action" @click="showLastIp(index,index1,index2)">
                                                                                <svg data-v-17d14546="" aria-hidden="true" width="16" height="16" viewBox="0 0 20 20" class="icon comment-icon"><g data-v-17d14546="" fill="none" fill-rule="evenodd"><path data-v-17d14546="" d="M0 0h20v20H0z"></path> <path data-v-17d14546="" stroke="#8A93A0" stroke-linejoin="round" d="M10 17c-4.142 0-7.5-2.91-7.5-6.5S5.858 4 10 4c4.142 0 7.5 2.91 7.5 6.5 0 1.416-.522 2.726-1.41 3.794-.129.156.41 3.206.41 3.206l-3.265-1.134c-.998.369-2.077.634-3.235.634z"></path></g></svg>
                                                                                <span class="action-title">回复</span>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                    <div v-show="twoIpIp[index][index1][index2]" class="comment-form reply-form reply sub-reply">
                                                                        <div class="form-box">
                                                                            <div class="auth-card">
                                                                                <input v-model="toTwoIp" type="text" class="oneTxt" placeholder="输入评论...">
                                                                            </div>
                                                                            <div class="action-box">
                                                                                <div class="submit">
                                                                                    <button :disabled="!toTwoIp" class="submit-btn" @click="toTwo(index,index1)">评论</button>
                                                                                </div>
                                                                            </div>
                                                                        </div>
                                                                    </div>
                                                                </div>
                                                            </div>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </li>
            </ul>
        </div>
        <div v-else>
            这里什么都没有
        </div>
    </div>
</template>

<script>
    export default {
        name: "Pins",
        created(){
            this.getPins()
        },
        mounted(){
            window.onscroll=this.myScroll
        },
        data(){
            return {
                pins:[],
                page:1,
                iconBasicUrl:"http://api_devss.wanxikeji.cn/",
                // 评论区是否展示
                isShowComment:[],
                // 一级评论框内的值
                oneIpArr:[],
                //一级评论的按钮是否显示
                oneIpBtn:[],
                //一级评论信息
                oneCommentData:[],
                //一级评论的头像
                oneIcon:[],
                //二级评论框内的值
                twoIpArr:[],
                //二级评论的按钮是否显示
                twoIpBtn:[],
                //二级评论的按钮点击后出现的输入框
                twoIpIp:[],
                // 回复给二级评论的值
                toTwoIp:""
            }
        },
        methods:{
            // 获取沸点的数据
            async getPins(){
                let result = await this.axios.post("api/articleList",{
                    user_id:this.$route.params.id,
                    page:this.page,//页码数
                    type:2//1为文章 2为沸点
                })
                // console.log(result)
                for(let i=0;i<result.data.data.data.length;i++){
                    result.data.data.data[i].info = JSON.parse(result.data.data.data[i].info.replace(/\\/g, ""))
                    this.isShowComment.push(false)
                    this.oneIpArr.push({[`oneip${i}`]:""})
                    this.oneIpBtn.push(false)
                    this.oneCommentData.push([])
                    this.oneIcon.push([])
                    this.twoIpBtn.push([])
                    this.twoIpArr.push({[`twoip${i}`]:""})
                    this.twoIpIp.push([])
                }
                if(this.page==1){
                    this.pins=result.data.data.data
                }else if(this.page>1){
                    this.pins = [...this.pins,...result.data.data.data]
                }
                // console.log(this.pins);
                
            },
            //点击控制评论区域是否展示
            async showCommentArea(index){
                this.twoIpBtn[index]=[]
                this.twoIpIp[index] = []
                this.isShowComment.splice(index,1,!this.isShowComment[index])
                let result = await this.axios.post("api/articleInfo",{article_id: this.pins[index].article_id})
                 // 点击的是哪一个沸点板块 就获取哪个板块的一级评论内容
                this.oneCommentData[index] = result.data.data.data;
                for (let i = 0; i < this.oneCommentData[index].length; i++) {
                    this.twoIpBtn[index].push(false)
                    this.oneIcon[index][i] ="http://api_devss.wanxikeji.cn/" + this.oneCommentData[index][i].icon;
                    this.twoIpIp[index].push([])
                    for(let j=0;j<this.oneCommentData[index][i].child.length;j++){
                        this.twoIpIp[index][i].push(false)
                    }
                }
                this.$forceUpdate()
            },
            oneIpFocus(index){
                if(this.oneIpArr[index][`oneip${index}`]!=="") return
                this.oneIpBtn.splice(index,1,!this.oneIpBtn[index])
            },
            oneIpBlur(index){
                if(this.oneIpArr[index][`oneip${index}`]!=="") return
                this.oneIpBtn.splice(index,1,!this.oneIpBtn[index])
            },
            //展示每个一级标题下面的评论框
            showTwoIp(index,index1){
                // console.log(index,index1)
                if(this.twoIpBtn[index][index1]==true){
                    this.twoIpBtn[index][index1]=false
                    this.twoIpArr[index][`twoip${index}`]=""
                    this.$forceUpdate()
                    return 
                }
                for(let i=0;i<this.twoIpBtn[index].length;i++){
                    this.twoIpBtn[index][i]=false
                }
                this.twoIpArr[index][`twoip${index}`]=""
                this.twoIpBtn[index].splice(index1,1,!this.twoIpBtn[index][index1])
                this.$forceUpdate()
            },
            //添加一级评论
            async addOneComment(index){
                await this.axios.post("api/addComment",{
                    token:this.$store.state.token,
                    comment_info:this.oneIpArr[index][`oneip${index}`],
                    article_id:this.pins[index].article_id})
            },
            //发送一级评论
            submitOne(index){
                this.addOneComment(index)
                this.getArticleInfo(index)
            },
            //发送二级评论
            async submitTwo(index,index1){
                if(this.twoIpArr[index][`twoip${index}`]==""){
                    return
                }
                let result = await this.axios.post("api/addComment",{
                    token: this.$store.state.token,
                    comment_info: this.twoIpArr[index][`twoip${index}`],
                    article_id: this.pins[index].article_id,
                    father_id: this.oneCommentData[index][index1].comment_id,
                })
                for(let i=0;i<this.twoIpBtn[index].length;i++){
                    this.twoIpBtn[index][i]=false
                }
                this.twoIpArr[index][`twoip${index}`]=""
                this.getArticleInfo(index)
                this.$forceUpdate()
                console.log(result)
            },
            async toTwo(index,index1){
                if(this.toTwoIp==""){
                    return
                }
                let result = await this.axios.post("api/addComment",{
                    token: this.$store.state.token,
                    comment_info: this.toTwoIp,
                    article_id: this.pins[index].article_id,
                    father_id: this.oneCommentData[index][index1].comment_id,
                })
                for(let i=0;i<this.twoIpIp.length;i++){
                    for(let j=0;j<this.twoIpIp[i].length;j++){
                        for(let k=0;k<this.twoIpIp[i][j].length;k++){
                            this.twoIpIp[i][j][k]=false
                        }
                    }
                }
                this.toTwoIp=""
                this.getArticleInfo(index)
                this.$forceUpdate()
                console.log(result)
            },
            async getArticleInfo(index){
                this.twoIpBtn[index]=[]
                this.twoIpIp[index] = []
                let result2 = await this.axios.post("api/articleInfo",{article_id: this.pins[index].article_id})
                this.oneCommentData[index] = result2.data.data.data;
                for (let i = 0; i < this.oneCommentData[index].length; i++) {
                    // twoIpBtn
                    this.twoIpBtn[index].push(false)
                    this.oneIcon[index][i] ="http://api_devss.wanxikeji.cn/" + this.oneCommentData[index][i].icon;
                    this.twoIpIp[index].push([])
                    for(let j=0;j<this.oneCommentData[index][i].child.length;j++){
                        this.twoIpIp[index][i].push(false)
                    }
                }
                // console.log(result2)
                this.oneIpArr[index][`oneip${index}`]=""
                this.oneIpBtn[index]=false
                this.$forceUpdate();
            },
            showLastIp(index,index1,index2){
                
                // console.log(this.twoIpIp[index][index1][index2])

                if(this.twoIpIp[index][index1][index2]==true){
                    this.twoIpIp[index][index1][index2]=false
                    this.toTwoIp=""
                    this.$forceUpdate()
                    return 
                }
                for(let i=0;i<this.twoIpIp.length;i++){
                    for(let j=0;j<this.twoIpIp[i].length;j++){
                        for(let k=0;k<this.twoIpIp[i][j].length;k++){
                            this.twoIpIp[i][j][k]=false
                        }
                    }
                }
                this.toTwoIp=""
                this.twoIpIp[index][index1].splice(index2,1,!this.twoIpIp[index][index1][index2])
                this.$forceUpdate()
            },
            // 监听滚动到底部
            myScroll(){
                let scrollTop = document.documentElement.scrollTop||document.body.scrollTop;
                //变量windowHeight是可视区的高度
                let windowHeight = document.documentElement.clientHeight || document.body.clientHeight;
                //变量scrollHeight是滚动条的总高度
                let scrollHeight = document.documentElement.scrollHeight||document.body.scrollHeight;
                //滚动条到底部的条件
                if(scrollTop+windowHeight==scrollHeight){
                    //写后台加载数据的函数
                    console.log("沸点hhhhh");
                    this.page++
                    this.getPins()
                }
            }
        },
        computed:{
            countClass(){
                let temparr = []
                for(let i=0;i<this.pins.length;i++){
                    let len = this.pins[i].info.imgs.length
                    if(len==1){
                        temparr.push("col-1")
                    }else if(len==4){
                        temparr.push("col-4")
                    }else if(len==0){
                        temparr.push("")
                    }else{
                        temparr.push("col-3")
                    }
                }
                return temparr
            }
        }
    }
</script>

<style scoped>
    .pin-item{
        margin-bottom: 8px;
        background-color: #fff;
    }
    .pin-header-row{
        display: flex;
        justify-content: space-between;
        padding: 16px 24px 0 20px;
    }
    .account-group{
        display:flex
    }
    .pin-header-row{
        align-items: center;
    }
    .user-popover{
        display:inline-block
    }
    .popover-link{
        font-size:0
    }
    .pin-header-row .avatar{
        flex: 0 0 auto;
        width: 45px;
        height: 45px;
        border-radius: 50%;
    }
    .pin-header-row .pin-header-content{
        margin-left:12px
    }
    .pin-header-row .username{
        font-size: 15px;
        font-weight: 600;
        color: #2e3135;
    }
    .pin-header-row .user-meta{
        display: flex;
        align-items: center;
        margin:4px 0 0;
        font-size: 13px;
        color: #8a9aa9;
    }
    .pin-header-row .user-meta .position {
        max-width: 280px;
    }
    .ellipsis {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .pin-header-row .user-meta .dot {
        margin: 0 6.5px;
    }
    .pin-header-row .user-meta .time{
        color:#8a9aa9;
    }
    .begin-follow .follow-button{
        margin: 0 0 0 auto;
        padding: 0;
        width: 55px;
        height: 26px;
        font-size: 13px;
        border:1px solid #6cbd45;
        color: #6cbd45;
        background-color:#fff;
        cursor: pointer;
        border-radius: 2px;
    }
    .begin-follow .follow-button:hover{
        opacity:.8
    }
    /*沸点的内容区域*/
    .pin-content-row,.pin-img-row{
        margin-top:5px;
        margin-bottom:5px;
        margin-left:77px;
        margin-right:48px;
    }

    .pin-content-row .content-box{
        font-size: 15px;
        line-height: 1.6;
        color: #17181a;
        overflow: hidden;
        white-space: pre-line;
    }
    /*沸点的图片区域*/
    .pin-img-row .img-wrap,.pin-img-row .img-box{
        display: flex;
        flex-wrap: wrap;
        max-width: 100%;
    }
    .pin-img-row .pin-img{
        position:relative;
    }
    .image{
        flex: 0 1 auto;
        margin-top: 4px;
        max-width: 100%;
        min-width: 110px;
        cursor: zoom-in;
        height:auto;
        min-height: 110px;
        max-height: 230px;
        object-fit: cover;
    }
    .img-box.col-1 .image{
        width: 200px;
    }
    .img-box.col-3{
        width: 398px;
    }
    .img-box.col-3 .image:not(:nth-child(3n)) {
        margin-right: 4px;
    }
    .img-box.col-3 .image{
        max-width: 110px;
        width: 110px;
    }
    .img-box.col-4{
        width: 532px;
    }
    .img-box.col-4 .image:not(:nth-child(4n)) {
        margin-right: 4px;
    }
    .img-box.col-4 .image{
        max-width: 110px;
        width: 110px;
    }
    /*沸点的点赞评论*/
    .pin-action-row .action-box{
        display: flex;
        position: relative;
        margin-top: 16px;
        height: 34px;
        border-top: 1px solid #ebebeb;
    }
    .pin-action-row .action{
        flex: 1 1 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        position: relative;
        height: 100%;
        cursor: pointer;
        user-select: none;
    }
    .pin-action-row .like-action::after{
        content:"";
        position:absolute;
        top: 50%;
        right: 0;
        margin-top: -12px;
        width: 1px;
        height: 24px;
        background-color: #ebebeb;
    }
    .pin-action-row .action-title-box{
        display: flex;
        align-items: center;
        justify-content: center;
    }
    .pin-action-row .action-title{
        margin-left: 4px;
        font-size: 13px;
        font-weight: 500;
        color: #8a93a0;
    }
    .pin-action-row .action:hover{
        opacity:.8
    }
    /* 评论区域 */
    .comment-list-box{
        position: relative;
        border-top: 1px solid #ebebeb;
        padding-top: 16px;
    }
    .comment-list-box .comment-form{
        display: flex;
        position: relative;
        padding: 12px 16px;
        margin:0 20px 16px;
        background-color: #fafbfc;
        border-radius: 3px;
    }
    .comment-form .avatar-box{
        flex: 0 0 auto;
    }
    .avatar-box .avatar{
        margin-right:12px;
        width: 32px;
        height: 32px;
        border-radius: 50%;
    }
    .comment-form .form-box{
        flex: 1 1 auto;
        position: relative;
    }
    .comment-form.focused .oneTxt{
        border-color:#007fff
    }
    .oneTxt{
        box-sizing:border-box;
        display: block;
        width:100%;
        position: relative;
        padding: 7.2px 12px;
        font-size: 13px;
        line-height: 22px;
        color: #17181a;
        outline: none;
        min-height: 22px;
        height:36px;
        background-color: #fff;
        border: 1px solid #f1f1f1;
        border-radius: 3px;
    }
    .oneTxt:focus{
        border-color:#007fff
    }
    .action-comment-box{
        display: flex;
        align-items: center;
        display: flex;
        justify-content:flex-end;
        margin-top:8px
    }
    .comment-submit .submit-btn{
        flex: 0 0 auto;
        margin-left: auto;
        padding: 6px 15px;
        font-size: 15px;
        color: #fff;
        background-color: #027fff;
        border:none;
        border-radius: 2px;
        cursor: pointer;
    }
    .comment-submit .submit-btn:disabled{
        cursor:default;
        opacity:.4
    }
    /* 评论列表区域 */

    .comment-list-box .comment-list{
        margin-left:78px;
        margin-right:20px;
    }
    .comment-list .comment-item:not(:last-child) {
        margin-bottom: 16px;
    }
    .comment{
        display: flex;
    }
    .user-link{
        flex: 0 0 auto;
    }
    .user-link .avatar{
        width: 32px;
        height: 32px;
        border-radius: 50%;
    }
    .comment-item{
        display: flex;
    }
    .comment-item .user-popover-box{
        display: inline;
    }
    .comment-item .content-box{
        margin-left: 10px;
        flex: 1 1 auto;
    }
    .comment-item:not(:last-child) .content-underline{
        border-bottom:1px solid #f1f1f1;
    }
    .meta-box{
        display: flex;
        align-items: center;
        font-size: 13px;
        line-height: 16px;
        white-space: nowrap;
    }
    .meta-box .position{
        color: #8a9aa9;
        font-size: 13px;
        margin-left: 4px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
        max-width: 192px;
    }
    .meta-box .username{
        font-size: 13px;
        font-weight: 400;
        flex: 1 1 auto;
        width: 0;
        color: #333;
    }
    .content{
        margin-top: 7px;
        font-size: 13px;
        line-height: 22px;
        word-wrap: break-word;
        white-space: pre-wrap;
        color: #505050;
        overflow: hidden;
    }
    .reply{
        display: flex;
        margin-top: 7px;
        font-weight: 400;
    }
    .reply .time{
        font-size: 13px;
        color: #8a9aa9;
        cursor: default;
    }
    .reply .action-box{
        flex: 0 0 auto;
        display: flex;
        justify-content: space-between;
        margin-left: auto;
        color: #8a93a0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    .reply .action-box .action{
        display: flex;
        align-items: center;
        cursor: pointer;
    }
    .action-box .action-title{
        margin-left: 6px;
        font-size:12px;
    }
    /* 二级评论区域 */
    .sub-content-list{
        margin: 12px 0;
        padding-left:12px;
        background-color: #fafbfc;
        border-radius: 3px;
    }
    .sub-content{
        position: relative;
        padding: 12px 0 0;
    }
    .sub-comment-content-row{
        display: flex;
        align-items: flex-start;
    }
    .sub-comment-content-box{
        display: flex;
        width:100%;
    }
    .user-content-box{
        margin-left: 10px;
        margin-right: 12px;
        padding-bottom: 12px;
        font-size: 13px;
        color: #17181a;
        width: 100%;
    }
    .user-content-box .content-box{
        display: inline-block;
        margin-top: 6px;
        overflow: hidden;
        margin-left:0;
    }
    .sub-comment-stat-box{
        display: flex;
        margin-top: 7px;
        font-size: 13px;
        color: #8a93a0;
    }
    .sub-comment-action-box{
        flex: 0 0 auto;
        display: flex;
        justify-content: space-between;
        margin-left: auto;
        font-size: 13px;
        color: #8a93a0;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    /* 回复一级评论的输入框 */
    .comment-form.reply{
        margin-top:13px;
        padding:12px;
    }
    .comment-action{
        cursor:pointer
    }
    .comment-form.reply{
        padding:12px;
        margin-top:13px;
    }
    .comment-form.sub-reply{
        background-color: #fff;
        border: 1px solid #f1f1f2;
    }
    .form-box{
        flex: 1 1 auto;
        position: relative;
    }
    .form-box .action-box{
        display: flex;
        justify-content:flex-end;
        align-items: center;
        margin-top:8px;
    }
    .form-box .action-box .submit-btn{
        border:none;
        flex: 0 0 auto;
        margin-left: auto;
        padding:6px 16px;
        font-size: 15px;
        color: #fff;
        background-color: #027fff;
        border-radius: 2px;
    }
    .form-box .action-box .submit-btn:disabled{
        opacity:.4;
        cursor:default
    }
</style>